<template>
  <div>
    <el-container>
      <el-header>
        <el-button type="primary" style="margin-left:50%;" @click="loginDialog = true;">{{ logining ?'已登陆':'登陆'}} </el-button>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" router>
                <el-menu-item index="classificationManagement">
                  <i class="el-icon-setting"></i>
                  <span slot="title">分类管理</span>
                </el-menu-item>
                <el-menu-item index="contentManagnment">
                  <i class="el-icon-setting"></i>
                  <span slot="title">内容源管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view :logining="logining" v-if="logining"></router-view>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog :visible.sync="loginDialog" :close-on-click-modal="false" width="50%">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="账号">
          <el-input placeholder="账号" v-model="username1" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="密码" type="password" v-model="password" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登陆</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
  export default {

    name: 'index',
    data() {
      return {
        username1: '',
        password: '',
        loginDialog: false,

        // 登陆成功？
        logining: false,

        activeIndex:'classificationManagement'

      }
    },
    components: {

    },

    mounted() {
      this.login();
    },

    methods: {
      // 高亮
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },

      // 登陆
      login() {
        let conf = {
          url: "/admin/login",
          method: "post",
          data: {
            username1: this.username1,
            password: this.password
          }
        };
        this.$axios(conf).then(res => {
          if (res.responseCode === 200) {
            this.loginDialog = false;
            this.logining = true;

          } else {
            this.$message.error({
              message: "请先登录",
              duration: 1000
            });
          }
        })
      }
    }
  }

</script>

<style>
  .el-header {
    /* background-color: #B3C0D1; */
    color: #333;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid #333;
  }

  .el-aside {
    /* background-color: #D3DCE6; */
    color: #333;
    text-align: center;
  }

  .el-main {
    /* background-color: #E9EEF3; */
    color: #333;

  }

  /* body > .el-container {
    margin-bottom: 40px;
  } */

</style>
